<template>
	<view class="barContent"> 
		<view class="barHeight">
			<image src="https://community.chuangxiangdianli.com/images/home/home_bg.png" mode="top"></image>
		</view>
		<view class="home_bg"><image src="https://community.chuangxiangdianli.com/images/home/home_bg.png" mode=""></image></view>
		<!-- 搜索 -->
		<view class="search" @click="goSearch">
			<image src="https://community.chuangxiangdianli.com/images/home/search.png" mode=""></image>
			健康美味康师傅
		</view>
		<!-- 轮播图 -->
		<view class="banner">
			<swiper class="swiper" indicator-dots="true" autoplay="true" interval="4000" duration="500">
				<swiper-item class="imgItem" v-for="(item, index) in banner" :key='item.id' @click="goBanner(item.url)">
					<image :src="item.image_url" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="classify p30">
			<view class="classify_item" v-for="(item, index) in cateList" :key='index' @click="goCate(item.url)">
				<image :src="item.image_url" mode=""></image>
				<view>{{ item.title }}</view>
			</view>
		</view>
		<!--  滚动公告 -->
		<!-- <view class="announcement"> -->
			<!-- <view class="guanggao">
				公告
			</view> -->
			<!-- <view class="notice">
				<TNoticeBar style="width: 100%;" :list='list'/>
				
			</view> -->
			<uni-notice-bar
				color="#869BAD"
				showGetMore="true"
				showIcon="true"
				background-color="#F7F9FB"
				single="true"
				:speed="50"
				scrollable="true"
			    :text="noticeStr"
				@click="goNotice"
			 ></uni-notice-bar>
			<!-- <view class="more_notice">
				<image src="https://community.chuangxiangdianli.com/images/home/back.png" mode=""></image>
			</view> -->
			<!-- <u-notice-bar :volume-icon="false" :more-icon='true' font-size='26rpx' type="success" mode='vertical' :list="list"></u-notice-bar> -->
		<!-- </view> -->
		<!-- 间隔条 -->
		<!-- <view class="jiange"></view> -->
		<!-- 物业服务 -->
		<view class="service">
			<view class="service_top" @click="goToProperty">
				<image src="https://community.chuangxiangdianli.com/images/home/service.png" mode=""></image>
				<view class="checkAll">
					查看全部
					<image src="https://community.chuangxiangdianli.com/images/home/arrow_right.png" mode=""></image>
				</view>
			</view>
			<scroll-view class="service_content" scroll-x="true">
				<view class="content_item" @click="goPropertyPaye(2)" style="background: url(https://community.chuangxiangdianli.com/images/home/water.png); background-size: 100%">
					<view>水费余额</view>
					<view>￥<text>{{myBalanceData.water_balance}}</text></view>
				</view>
				<view class="content_item" @click="goPropertyPaye(1)" style="background: url(https://community.chuangxiangdianli.com/images/home/service_content.png); background-size: 100%">
					<view>电费余额</view>
					<view>￥<text>{{myBalanceData.electric_balance}}</text></view>
				</view> 
				<view class="content_item" @click="goPropertyPaye(3)" style="background: url(https://community.chuangxiangdianli.com/images/home/wuyefuwu.png); background-size: 100%">
					<view>物业服务</view> 
					<view>￥<text>{{myBalanceData.property_balance}}</text></view>
				</view>
			</scroll-view>
		</view>
		<!-- 活动模块 -->
		<view class="active">
			<swiper class="swiper" indicator-dots="true" autoplay="true" interval="4000" duration="500">
				<swiper-item class="imgItem" v-for="(item, index) in resourcesList" :key='item.id' @click="goBanner(item.url)">
					<image :src="item.image_url" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<!--  猜你喜欢  title -->
		<view class="maybeLike_title" @click="goGoods">
			<view class="left">
				<view>
					<image src="https://community.chuangxiangdianli.com/images/home/star.png" mode=""></image>
					精选
				</view>
				<view>
					猜你喜欢
				</view>
			</view>
			<view class="right">
				<image src="https://community.chuangxiangdianli.com/images/home/likearrow.png" mode=""></image>
			</view>
		</view>
		<!--  UView瀑布流组件 -->
		<view class="water">
			<waterfallFlow
				:leftData='leftData'
				:rightData='rightData'
			 />
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	// import TNoticeBar from '@/components/notice/t-notice-bar.vue'
	import waterfallFlow from '../../components/waterfallFlow/waterfallFlow.vue'
	export default {
		components: {
			waterfallFlow,
			// TNoticeBar
		},
		data() {
			return {
				// 分类列表数据
				navList: [
					{title: '全部分类', icon: 'https://community.chuangxiangdianli.com/images/home/classify.png'},
					{title: '热门推荐', icon: 'https://community.chuangxiangdianli.com/images/home/jin_two.png'},
					{title: '服饰箱包', icon: 'https://community.chuangxiangdianli.com/images/home/jin_three.png'},
					{title: '母婴用品', icon: 'https://community.chuangxiangdianli.com/images/home/jin_four.png'},
					{title: '家用电器', icon: 'https://community.chuangxiangdianli.com/images/home/jin_five.png'},
					{title: '美妆护肤', icon: 'https://community.chuangxiangdianli.com/images/home/jin_six.png'},
					{title: '居家生活', icon: 'https://community.chuangxiangdianli.com/images/home/jin_seven.png'},
					{title: '数码办公', icon: 'https://community.chuangxiangdianli.com/images/home/jin_eight.png'},
					{title: '美食饮品', icon: 'https://community.chuangxiangdianli.com/images/home/jin_nine.png'},
					{title: '更多精彩', icon: 'https://community.chuangxiangdianli.com/images/home/jin_ten.png'}
				],
				cateList: [],  // 类目数据
				goodsData: [], // 推荐商品数据
				noticeData: [], // 公告数据
				noticeStr: '', // 拼接的字符串
				banner: [],  // 轮播图数据
				resourcesList: [],  // 广告位数据
				leftData: [], // 瀑布流左侧数据
				rightData: [], // 瀑布流右侧数据
				myBalanceData: {} // 物业列表数据
			}
		},
		onLoad() {

		},
		onShow() {
			// 请求推荐商品
			this.getGoodsData()
			// 获取公告信息
			this.getNoticeData()
			// 轮播图
			this.getBanner()
			//  广告位
			this.getResourcesList()
			//  获取类目
			this.getCateList()
			//  获取导航
			// this.getNavlist()
			// 获取物业余额
			this.getMyBalance()
		},
		methods: {
			// 跳转商品列表
			goGoods() {
				console.log(11111)
				uni.navigateTo({
					url: '/other/allCategories/index'
				})
			},
			// 获取导航
			getNavlist() {
				var that = this
				this.$mrequest({
					url: 'wechat/getNavList',
					method: 'GET',
					callBack: function callBack (res) {
						console.log('导航请求成功~！', res)
					},
					fail: function fail (res) {
						console.log('导航请求失败 ~！', ssres)
					}
				})
			},
			//  获取所有类目
			getCateList() {
				var that = this
				this.$mrequest({
					url: 'wechat/getIndexCateList',
					method: 'GET',
					callBack: function callBack (res) {
						if (res.code == 200) {
							that.cateList = res.data
							console.log('类目数据！', that.cateList)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},
					fail: function fail (res) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					} 
				})
			},
			// 跳转到公告列表
			goNotice() {
				uni.navigateTo({
					url: '/property/announce/index'
				})
			},
			//  获取首页banner
			getBanner() {
				var that = this
				this.$mrequest({
					url: 'wechat/operation/getHomeBannerList',
					method: 'GET',
					callBack: function callBack (res) {
						if (res.code == 200) {
							that.banner = res.data
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},
					fail: function fail (res) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					} 
				})
			},
			//  banner点击跳转
			goBanner(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 获取广告为数据
			getResourcesList() {
				var that = this
				this.$mrequest({
					url: 'wechat/operation/getResourcesList',
					method: 'GET',
					callBack: function callBack (res) {
						if (res.code == 200) {
							that.resourcesList = res.data
							console.log('广告位数据', that.resourcesList)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},
					fail: function fail (res) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 获取公告数据
			getNoticeData() {
				var that = this
				that.noticeStr = ''
				this.$mrequest({
					url: 'Mini/Estate/new_notice',
					method: 'GET',
					callBack: function callBack (res) {
						console.log('打印的首页公告', res)
						if (res.code == 200) {
							that.noticeData = res.data
							console.log(that.noticeData)
							//  进行字符串拼接
							if (JSON.stringify(that.noticeData) != '[]') {
								that.noticeData.map((item, index) => {
									that.noticeStr += (item.name + '     ')
								})
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},
					fail: function fail (res) {
						// console.log('失败了给爷爬！')
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 获取商品数据
			getGoodsData() {
				request.post({
					url: 'Mini/goods/goodsList',
					data: {
						is_master: 1
					}
				}).then(res => {
					// console.log('首页数据', res)
					if (res.status) {
						this.goodsData = res.data.data
						var left = [] 
						var leftHeight = 0
						var right = []
						var rightHeight = 1
						this.goodsData.map((item, index) => {
							if (leftHeight < rightHeight) {
								if (item.full_reductions.length > 0) {
									leftHeight += 260
								} else {
									leftHeight += 234
								}
								left.push(item)
							} else {
								if (item.full_reductions.length > 0) {
									rightHeight += 260
								} else {
									rightHeight += 234
								}
								right.push(item)
							}
						})
						this.leftData = left
						this.rightData = right
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				})
			},
			// 跳转物业服务
			goPropertyPaye(num) {
				// 1: 电费余额， 2：水费余额， 3：物业服务 
				if (num === 1) {
					uni.navigateTo({
						url: '/property/feePage/index?type=' + 'electric'
					})
				} else if (num === 2){
					uni.navigateTo({
						url: '/property/feePage/index?type=' + 'water'
					})
				} else if (num === 3) {
					uni.navigateTo({
						url: '/property/propertyFee/index'
					})
				}
			},
			//  跳转搜索页面
			goSearch() {
				uni.navigateTo({
					url: '/other/home/homeSearch'
				})
			},
			// 前往物业服务
			goToProperty(){
				uni.navigateTo({
					url: '/property/index'
				})
			},
			// 获取水电物业费余额
			getMyBalance(){
				this.$mrequest2({
					url: 'Mini/property/my_balance',
					method: 'GET'
				}).then(res => {
					if(res.code == 200){ 
						this.myBalanceData = res.data 
						console.log(this.myBalanceData)
					} 
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.barHeight{
		height: calc(var(--status-bar-height) + 20rpx);
		overflow: hidden;
		&>image{
			display: block;
			width: 100%;
			height: calc(var(--status-bar-height) + 20rpx);
		}
	}
	.jiange{
		height: 10rpx;
		background: #F7F7F7;
		z-index: -1;
	}
	.home_bg{
		position: fixed;
		left: 0;
		top: 0;
		height: 400rpx;
		width: 100%;
		z-index: -1;
		&>image{
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	.search{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		height: 60rpx;
		width: 474rpx;
		border-radius: 30rpx;
		background-color: #fff;
		margin-left: 34rpx;
		margin-top: 18rpx;
		margin-bottom: 37rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		&>image{
			display: block;
			height: 34rpx;
			width: 34rpx;
			margin-left: 27rpx;
			margin-right: 30rpx;
		}
	}
	.banner{
		margin: 0 30rpx;
		height: 324rpx;
		background-color: #fff;
		border-radius: 15rpx;
		overflow: hidden;
		.swiper{
			width: 100%;
			height: 100%;
			.imgItem{
				height: 100%;
				width: 100%;
				/deep/ uni-image{
					height: 100%;
					width: 100%;
				}
			}
		}
	}
	.classify{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 100%;
		margin: 20rpx 0 39rpx;
		padding-top: 27rpx;
		.classify_item{
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			width: 120rpx;
			&>image{
				display: block;
				width: 92rpx;
				height: 92rpx;
			}
			&>view{
				margin-top: 15rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #464646;
			}
		}
	}
	.announcement{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin: 0 30rpx;
		height: 75rpx;
		background: #F7F9FB;
		// padding: 0 21rpx;
		margin-bottom: 24rpx;
		border-radius: 15rpx;
		.guanggao{
			height: 41rpx;
			width: 73rpx;
			background: #34C39E;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			border-radius: 10rpx;
			text-align: center;
			line-height: 41rpx;
		}
		.notice{
			flex: 1;
			height: 100%;
		}
		.more_notice{
			height: 26rpx;
			width: 26rpx;
			margin-left: auto;
			&>image{
				display: block;
				height: 100%;
				width: 100%;
			}
		}
	}
	.service{
		width: 100%;
		padding: 16rpx 0 32rpx;
		box-sizing: border-box;
		.service_top{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 0 41rpx;
			box-sizing: border-box;
			&>image{
				display: block;
				height: 27rpx;
				width: 114rpx;
			}
			.checkAll{
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
				width: 150rpx;
				height: 48rpx;
				background: #FFF8F8;
				
				font-size: 22rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #34C39E;
				&>image{
					display: block;
					height: 17rpx;
					width: 17rpx;
				}
			}
		}
		.service_content{
			height: 188rpx;
			width: 100%;
			padding-left: 15rpx;
			box-sizing: border-box;
			white-space: nowrap;
			margin-top: 31rpx;
			.content_item{
				overflow: hidden;
				display: inline-block;
				width: 319rpx;
				height: 188rpx;
				// background: url(https://community.chuangxiangdianli.com/images/home/service_content.png);
				// background-size: 100%;
				margin-right: 10rpx;
				&>view{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					margin-left: 33rpx;
					margin-top: 38rpx;
				}
			}
		}
	}
	.active{
		width: 100%;
		height: 214rpx;
		.swiper{
			width: 100%;
			height: 100%;
			.imgItem{
				height: 100%;
				width: 100%;
				/deep/ uni-image{
					height: 100%;
					width: 100%;
				}
			}
		}
	}
	.maybeLike_title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 95rpx;
		width: 100%;
		background-color: #fff;
		padding-right: 32rpx;
		box-sizing: border-box;
		z-index: 11;
		.left{
			display: flex;
			flex-direction: column;
			justify-content: center;
			&>view:nth-child(1){
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-left: 27rpx;
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				&>image{
					display: block;
					width: 34rpx;
					height: 34rpx;
				}
				
			}
			&>view:nth-child(2){
				width: 109rpx;
				height: 21rpx;
				text-align: right;
				font-size: 21rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #6D6D6D;
				background: linear-gradient(90deg, #F7F6F7, #D4FCF2);
			}
		}
		.right{
			width: 24rpx;
			height: 24rpx;
			&>image{
				display: flex;
				width: 24rpx;
				height: 24rpx;
			}
		}
	}
	.water{
		width: 100%;
		padding: 0 15rpx;
		box-sizing: border-box;
		background: #F7F7F7;
	}
</style>
